<template>
  <div id="chat">
    <van-nav-bar title="聊天机器人" left-arrow @click-left="$router.back()" />

    <!-- 聊天消息     -->
    <van-cell-group class="chat-message">
      <van-cell title="单元格" />
    </van-cell-group>

    <!-- 聊天框 -->
    <van-field
      class="chat-message-field"
      v-model="chatMessage"
      rows="1"
      autosize
      center
      clearable
      type="textarea"
      placeholder="请输入聊天内容"
      maxlength="150"
      show-word-limit
    >
      <template #button>
        <van-button size="small" type="primary">发 送</van-button>
      </template>
    </van-field>
  </div>
</template>
<script>
import io from 'socket.io-client'
export default {
  name: 'web-io',
  data () {
    return {
      chatMessage: ''
    }
  },
  created () {
    // 建立连接
    const socket = io('http://localhost:3000/')
    const num = {
      a: '1'
    }
    // 当客户端与服务器建立连接成功，触发 connect 事件
    socket.on('connect', (socket) => {})

    socket.on('message', (data, callback) => {
      console.log('收到服务器消息：', data)
      callback(num)
    })
    // 发送消息
    // socket.emit('消息类型'，消息内容)
    // 接收消息
    // socket.on('消息类型',(data)=>{})
    // 监听接收服务端消息
  },
  methods: {},
  components: {},
  props: {},
  watch: {},
  computed: {},
  mounted () {}
}
</script>

<style lang="less" scoped>
#chat {
  .chat-message {
    position: fixed;
    right: 0;
    left: 0;
    top: 46px;
    bottom: 44px;
    background-color: #f2f3f5;
  }
  .chat-message-field {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
  }
}
</style>
